<template>
	<div class="flex-container">
		<div class="flex-item left">
			<add></add>
		</div>
		<div class="flex-item center">
			<left></left>
		</div>
		<div class="flex-item right">
			<right></right>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	import add from './addData.vue';
	import left from './studyData.vue';
	import right from './reviewData.vue';
	// onMounted(() => {
	// 	window.addEventListener('beforeunload', () => {
	// 		// 可以在这里执行任何需要在刷新前进行的操作
	// 	});
	// 	window.addEventListener('keydown', (event) => {
	// 		if (event.key === 'F5') {
	// 			// 可以在这里执行刷新时的逻辑
	// 			// 例如，发送重置请求等
	// 		}
	// 	});
	// });
</script>


<style>
	.flex-container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.flex-item {
		/* flex: 1; */
	}

	/* 各个子元素的样式可以根据需求调整 */
	.left {
		width: 20%;
		background-color: #f0f0f0;
		/* 用于示例效果 */
	}

	.center {
		width: 40%;
		background-color: #e0e0e0;
		/* 用于示例效果 */
	}

	.right {
		width: 40%;
		background-color: #d0d0d0;
		/* 用于示例效果 */
	}
</style>